<template>
	<view class="goshop-post-container" @touchmove.stop.prevent="moveHandle">
		<view class='goshop-post-header'>
			<view class="goshop-head-wrap u-p-x-20">
				<view class="goshop-head-tabs">
					<view @click="topTabClick(index)" v-for="(item,index) in topTabList" :key="index"
						:class="['goshop-head-tabs-item',topCurrent==index?'active':'']">{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="goshop-post-content">
			<!-- 空白页 -->
			<u-empty v-if="isEmpty === true && postDataList.length === 0" :text="emptyText" mode="list"></u-empty>
			<goshop-dynamic @popup="onPopupShow" :dynamicList="postDataList"></goshop-dynamic>
			<u-loadmore
					:status="loadStatus" 
					:loading-text="loadingText" 
					:loadmore-text="loadmoreText" 
					:nomore-text="nomoreText" 
					loadingIcon="semicircle"
					@loadmore="getPostPage"
				/>
		</view>
	</view>
</template>

<script>
	import {postPage} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js';
	export default {
		data() {
			return {
				popupShow:false,
				//顶部tab选项卡
				topTabList: [],
				topCurrent:0,
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				postDataList: [],
				loadStatus: 'loadmore',
				emptyText:'',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				params: {
					pageNo: 1,
					type: 1, //我发布的
					pageSize: 10,
					categoryId: 2,
					memberId:null,
				},
			};
		},
		onShow() {
			let that = this;
			this.params.memberId = jwt.getUserId();
			that.refresh();
		},
		onLoad(){
			this.getPostPage()	
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getPostPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.postDataList = []
			this.getPostPage()
		},
		methods:{
			moveHandle() {},
			onPopupShow(data){
				this.popupShow = data;
			},
			getPostPage(){
				this.loadStatus = 'loading';
				postPage(this.params).then((res)=>{
					debugger
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.postDataList = this.postDataList.concat(res.data.list);
					  } else {
						this.postDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
			topTabClick(e) {
				debugger
				this.topCurrent = e;
				this.params.type = this.topTabList[this.topCurrent].type;
				this.params.pageNo = 1;
				this.$nextTick(() => {
					this.getPostPage();
				});
			},
			refresh(){
				this.topTabList=[{
					name: this.$t('post.published.text'),
					type:1,
				}, {
					name: this.$t('post.rated.text'),
					type:2,
				}];
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
			},
		}
	}
</script>

<style lang="scss">
.popupShow {
	overflow: hidden;
	position: fixed;
	height: 100vh;
	width: 100%;
}
.goshop-post-container{
	display: flex;
	flex-direction: column;
	.goshop-post-header{
		z-index: 100;
		position: fixed;
		width: 100%;
		background-color: $goshop-color-auxiliary-one;
		.goshop-head-wrap{
			//background-color: #ff5d50;
			.goshop-head-tabs{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				.goshop-head-tabs-item {
						display: inline-block;
						margin-right: 20rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 15px;
						//color: $goshop-color-auxiliary-one;
						&.active {
							//color: $goshop-color-auxiliary-four;
							font-weight: bold;
							position: relative;
						}
						&.active::before {
						  position: absolute;
						  bottom: 0;
						  left: 50%;
						  transform: translateX(-50%);
						  content: '';
						  width: 100rpx;
						  height: 7rpx;
						  border-radius: 5rpx;
						  background-color: $goshop-color-primary;
						}
					}
			}
		}
	}
	.goshop-post-content{
		margin-top: 80rpx;
	}
}
</style>
